<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>投影</title>
</head>
<body>


<a id="img1">
	<img src="../w658.jpg" alt="Rawrrr!" />
</a>
<style>
	#img1 {
		display: block;
		width: 580px;
		background: hsl(335,100%,50%);
	}
	#img1 img {
		mix-blend-mode: luminosity;  /*    叠加背景颜色，如果背景是白色，则相当于PS中的去色    */
	}
</style>
<br/><br/><br/><br/>



<div id="img2"></div>
<style>
	#img2 {
		width:580px; height: 620px;
		background-size: cover;
		background-color:hsl(335,100%,50%);
		background-blend-mode:luminosity;
		transition:.5s background-color;
		background-image: url(../w658.jpg)
	}
	#img2 :hover {
		background-color: transparent;
	}
</style>
<br/><br/><br/><br/>




<div id="img3">
	<main>
		<blockquote>
			"The only way to get rid of a temptation[...]"
			<footer>－
				<cite>
					Oscar Wilde,
					The Picture of Dorian Gray
				</cite>
			</footer>
		</blockquote>
	</main>
</div>
<style>
	#img3,main::before {
		width:580px; height: 620px;
		position:relative;
		background :url(../w658.jpg) 0 /cover fixed;
	}
	main{
		width:280px; height: 220px;
		position:relative;
		background:hsla(0,0%,100%,.3);   /*   增加不透明效果回退样式  */
		overflow: hidden;
	}
	main:before {
		content: '';
		position:absolute;
		width:300px;
		height:100px;
		filter: blur(20px);    /*//只对绝对定位起作用*/
	}


</style>
<br/><br/><br/><br/>



折角效果

<div id="img4"></div>
<style>
	#img4{
		width:580px; height: 620px;
		background:
			linear-gradient(to left bottom,
			transparent 50%,rgba(0,0,0,.4)0)
			no-repeat 100% 0 /3em 3em,
			linear-gradient(-135deg,transparent 2em,#58a 0);
	}
</style>
<br/><br/><br/><br/>






折角效果

<div id="img5"></div>
<style>
	#img5 {
		width:580px; height: 620px;
		position:relative;
		background:#58a; /* 回退样式*/
		background:
			linear-gradient(-150deg,
			transparent 1.5em,#58a 0);
	}
	#img5:before  {
		content: '';
		position:absolute;
		top:-10px; right:10px;
		background:linear-gradient(to left bottom,
		transparent 50%,rgba(0,0,0,.4)0)
		100% 0 no-repeat;
		width: 1.73em;
		height: 3em;
		transform: rotate(-30deg);
	}
</style>
<br/><br/><br/><br/>






折角效果

<div id="img6"></div>
<style>
	#img6 {
		width:580px; height: 620px;
		position:relative;
		background:#58a; /* 回退样式*/
		background:
			linear-gradient(-150deg,
			transparent 1.5em,#58a 0);
		border-radius: .5em;
	}
	#img6:before  {
		content: '';
		position:absolute;
		top:0; right:0;
		background: linear-gradient(to left bottom,
		transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4))
		100% 0 no-repeat;
		width:1.73em;
		height:3em;
		transform: translateY(-1.3em)rotate(-30deg);
		transform-origin:bottom right;
		border-bottom-left-radius: inherit;
		box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
	}
</style>
<br/><br/><br/><br/>











</body>
</html>